<template>
 <div>
   <el-form :inline="true" :model="queryForm" class="demo-form-inline">
     <el-form-item label="商品名称">
       <el-input v-model="queryForm.name" placeholder="商品名称"></el-input>
     </el-form-item>
     <el-form-item label="商品货号">
       <el-input v-model="queryForm.hh" placeholder="商品货号"></el-input>
     </el-form-item>

     <el-form-item label="商品品牌">
       <el-select v-model="queryForm.brandId" placeholder="请选择商品品牌">
         <el-option  v-for="b in brands" :label="b.name" :value="b.id" :key="b.id"></el-option>

       </el-select>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="list">查询</el-button>
     </el-form-item>
   </el-form>

     <el-table
         :data="tableData"
         style="width: 100%">
       <el-table-column
           prop="id"
           label="id"
           width="180">
       </el-table-column>
       <el-table-column
           prop="pic"
           label="商品图片"
           width="180">
         <template v-slot="scope">
           <el-image :src="scope.row.pic" style="height: 50px;width: 60px"></el-image>
         </template>
       </el-table-column>

       <el-table-column
           prop="name"
           label="商品名称"
           width="180">
       </el-table-column>


       <el-table-column
           prop="brandName"
           label="商品品牌"
           width="180">
       </el-table-column>

       <el-table-column
           label="价格/货号">
         <template v-slot="scope">
          价格:{{scope.row.price}}<br>
           货号:{{scope.row.hh}}
         </template>
       </el-table-column>
       <el-table-column
           prop="xh"
           label="序号"
           width="180">
       </el-table-column>
       <el-table-column
           prop="sales"
           label="销量"
           width="180">
       </el-table-column>
       <el-table-column
           prop="status"
           label="审核状态"
           width="180">
       </el-table-column>

       <el-table-column
           fixed="right"
           label="操作"
           width="100">
         <template slot-scope="scope">
           <el-button @click="delById(scope.row.id)" type="text" size="small">删除</el-button>
           <el-button type="text" size="small">编辑</el-button>
         </template>
       </el-table-column>

     </el-table>
     <el-pagination

         @current-change="goPage"
         :page-size="size"
         layout="total, prev, pager, next"
         :total="total">
     </el-pagination>

 </div>
</template>

<script>
export default {
  name: "GoodsView",
  data() {
    return {
      tableData:[],
      queryForm:{

      },
      size:3,
      current:1,
      total:0,
      brands:[],
    }
  }, methods: {
    //逻辑删除
    delById(id){
      if(confirm("确任删除吗?")) {
        this.axios.get("http://localhost:9999/goods/delById?id=" + id).then(res => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            this.list();
          } else {
            this.$message.error(res.data.msg);
          }
        })
      }
    },
    goPage(page){
      this.current = page;
      this.list();
    },
     list(){
       this.axios.post("http://localhost:9999/goods/list?current="+this.current+"&size="+this.size,this.queryForm).then(res=>{
         if(res.data.code==200){
           this.tableData= res.data.data.list;
           this.total =res.data.data.total;
         }else{
           this.$message.error(res.data.msg);
         }

       })
     }
     ,
    brandList(){//获取所有品牌
      this.axios.get("http://localhost:9999/goods/brandList").then(res=>{
        this.brands =res.data.data;
      })
      }
  },
    created() {
      this.list();
      this.brandList()
  }
}
</script>

<style scoped>

</style>